<template>
  <div class="record-card">
    <div class="record-date flex flex-start">{{ props.record.date }}</div>
    <div class="record-list">
      <div class="record" v-for="(record, idx) in props.record.list" :key="idx">
        <div class="record-info flex flex-space align-start">
          <div class="record-day flex-shrink">{{ record.day }}</div>
          <div class="record-title flex-grow">{{ record.action }}</div>
          <div class="record-desc flex ml-24 flex-shrink" :style="getFontColor(record.actionColor)">
            <div class="desc-label">{{ record.actionDetail }}</div>
            <div class="desc-value flex-shrink">{{ record.actionAmount }}</div>
          </div>
        </div>
        <div class="record-balance flex flex-end">
          <div class="balance-label">余额:￥</div>
          <div class="balance-value">{{ record.balance }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { RecordItem } from '@/types/mall'

interface RecordCardProps {
  record: RecordItem
}
const props = withDefaults(defineProps<RecordCardProps>(), {
  record: () => ({}) as RecordItem,
})
const getFontColor = (color: string) => {
  return `color: ${color}`
}
</script>
<style lang="scss" scoped>
.record-card {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  line-height: 1;
}
.record-date {
  height: 30px;
  font-size: 13px;
  color: #666;
  padding: 0 24px;
  box-sizing: border-box;
  border-bottom: 1px solid #e6e6e6;
}
.record-list {
  padding: 0 24px 12px;
  box-sizing: border-box;
}
.record {
  border-bottom: 1px dashed #b5b5b5;
  padding: 18px 0;
  box-sizing: border-box;
}
.record-day,
.record-title {
  font-size: 11px;
  color: #666;
}
.record-title {
  line-height: 14px;
  margin-left: 28px;
}
.record-desc {
  font-size: 12px;
  color: #666;
  .desc-value {
    font-weight: bold;
  }
}
.record-balance {
  margin-top: 17px;
  .balance-label,
  .balance-value {
    font-size: 12px;
    color: #000;
  }
  .balance-value {
    font-weight: bold;
  }
}
</style>
